<template>
	<view class="field">
		<view class="content">
			<view class="title">
				<u-section title="志愿领域" sub-title="更多" :show-line="false" font-size="34" color="#333333">
				</u-section>
			</view>

			<view class="menuCon">
				<u-row gutter="14" class="gutterBottom">
					<u-col span="4">
						<view class="item mainOrange">
							<text class="iconfont iconlilunxuanjiang icon"></text>
							<text>理论宣讲</text>
						</view>
					</u-col>
					<u-col span="4">
						<view class="item subOrange">
							<text class="iconfont iconjiaoyuzhuanqu icon"></text>
							<text>教育专区</text>
						</view>
					</u-col>
					<u-col span="4">
						<view class="item subOrange">
							<text class="iconfont iconwenhuazhuanqu icon"></text>
							<text>文化专区</text>
						</view>
					</u-col>
				</u-row>
				<u-row gutter="14" class="gutterBottom">
					<u-col span="4">
						<view class="item mainBlue">
							<text class="iconfont iconkejikepu icon"></text>
							<text>科技科普</text>
						</view>
					</u-col>
					<u-col span="2.666666">
						<view class="item subBlue">
							<text class="iconfont icontiyujianshen icon"></text>
							<text>体育健身</text>
						</view>
					</u-col>
					<u-col span="2.666666">
						<view class="item subBlue">
							<text class="iconfont iconpufazhuanqu icon"></text>
							<text>普法专区</text>
						</view>
					</u-col>
					<u-col span="2.666666">
						<view class="item subBlue">
							<text class="iconfont iconzhucanzhuanqu icon"></text>
							<text>助残专区</text>
						</view>
					</u-col>
				</u-row>
				<u-row gutter="14">
					<u-col span="4">
						<view class="item mainRed">
							<text class="iconfont iconyifengyisu icon"></text>
							<text>移风易俗</text>
						</view>
					</u-col>
					<u-col span="2.666666">
						<view class="item subRed">
							<text class="iconfont iconshenbianbangyang icon"></text>
							<text>身边榜样</text>
						</view>
					</u-col>
					<u-col span="2.666666">
						<view class="item subRed">
							<text class="iconfont iconsaohuangdafei icon"></text>
							<text>打黄扫非</text>
						</view>
					</u-col>
					<u-col span="2.666666">
						<view class="item subRed">
							<text class="iconfont iconshenghuohuimin icon"></text>
							<text>生活慧民</text>
						</view>
					</u-col>
				</u-row>

			</view>
		</view>
	</view>
</template>


<script>
	export default {
		components: {

		},
		data() {
			return {

			};
		},

		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	@import "@/commom/styles/icons.css";
	.field {
		position: relative;
		padding: 20rpx;
		padding-top: 0;
		.content {
			width: 100%;
			padding: 15rpx;
			padding-top: 36rpx;
			padding-bottom: 24rpx;
			background: #fff;
			box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(216, 216, 216, 0.49);
			.title {
				width: 100%;
				padding-left: 5rpx;
			}

			.menuCon {
				width: 100%;
				margin-top: 23rpx;
				.gutterBottom {
					margin-bottom: 12rpx;
				}
				.item {
					height: 120rpx;
					border-radius: 10rpx;
					display: flex;
					flex-direction: column;
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
					justify-content: center;
					align-items: center;
					
					>text {
						&:nth-child(1) {
							line-height: 40rpx;
						}
					}
                     .icon{
						 font-size: 40rpx;
						 margin-bottom: 4rpx;
					 }
					&.mainOrange {
						background: linear-gradient(270deg, #F9B45D 0%, #F29B56 100%);
					}

					&.subOrange {
						background: #FCF1E9;
						color: #F28C3C;
					}

					&.mainBlue {
						background: linear-gradient(90deg, #53ABF2 0%, #5ED1F6 100%);
					}

					&.subBlue {
						background: #DAF1FF;
						color: #54ADF2;
					}

					&.mainRed {
						background: linear-gradient(90deg, #F7533C 0%, #F98E6E 100%);
					}

					&.subRed {
						background: #FBEDEA;
						color: #E7432C;
					}
				}
			}
		}
	}
</style>
